<!DOCTYPE html>
<html ng-app="cms">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/mui.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<script type="text/javascript" src="js/angular.js"></script>
		<script type="text/javascript" src="js/angular/controller.js"></script>
		<style>
			<style> .swiper-container {
				width: 100%;
				height: 200px;
			}
			
			.swiper-slide {
				height: 200px;
				text-align: center;
				font-size: 18px;
				background: #fff;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.swiper-slide img {
				width: 100%;
				height: 100%;
			}
		</style>
		</style>
	</head>

	<body>
		<div class="swiper-container" ng-controller="listTopInfo">
			<div class="swiper-wrapper">
				<div class="swiper-slide" ng-repeat="topInfo in topInfos">
					<img src="{{topInfo.thumpic}}?imageMogr2/thumbnail/400x300>" ng-click="getNewsInfo(topInfo.id)" />
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" ng-controller="listUnTopInfo">
					<li class="mui-table-view-cell mui-media" ng-repeat="info in infos">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="{{info.thumpic}}?imageView2/1/w/30/h/30">
							<div class="mui-media-body" ng-click="getNewsInfo(info.id)">
								{{info.title}}
								<p class='mui-ellipsis'>{{info.content}}</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/mui.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script>
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
			});
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了',
						callback: pullUpRefresh
					}
				}
			});

			function pullUpRefresh() {
				this.endPullupToRefresh(true); //refresh completed
			}
		</script>
	</body>

</html>